<template>
  <div class="" style="height:100%;">
    <div class="ub orderHeader ub-pj bg_w fc_333">
      <div class="ub ub-ac ub-pc" :key="index" :class="{selItem:(sel === item.sel)}" v-for="(item, index) in orderPage" @click="changePage(item.value, index)">{{item.message}}</div>
    </div>
    <div class="pop-select-bottom hhh" v-show="iscountry">
      <div class="flag">
        <a class="flagitem" href="#re">
          热
        </a>
        <a class="flagitem" :href="'#' + key" :key="key" v-for="(items,key,index) in countryList">
          {{key}}
        </a>
      </div>
      <ul class="pop-select" style="height:100%;overflow-y: scroll; background-color:#eee;padding:0">
        <div id="re" class="item1 tit">热门城市</div>
        <li :id="key" :key="key" v-for="(item,key,index) in hot_city_list">
          <div class="item1" :key="item.code3" @click="selCountry(item.code3,item.city)">{{item.city}}</div>
        </li>
        <li :id="key" :key="key" v-for="(items,key,index) in countryList">
          <div class="item1 tit">{{key}}</div>
          <div class="item1" :key="item.code3" v-for="(item,index) in items" @click="selCountry(item.code3,item.city)">{{item.city}}</div>
        </li>
      </ul>
    </div>
    <div v-show="sel===0" class="index1 bg-white">
      <div class="  padding-css3">
        <div class="ub padding-css1 border-botttom ub-ac">
          <div class=" ub input-left pn">
            <img class="hb-img1" src="./dynamic_pn.png">
            <span>航班号</span>
          </div>
          <div class="ub" data-ma="PN" @click="changeCM('')" id="sel_ma">
            <div class="ub pn" id="sel_text">{{airCM}}</div>
            <div class="arrow_down ub-img1"></div>
            <div class="ub ub-ver" v-show="CM" id="xila_ma">
              <div class="ub ub-pc ub-ac" @click="changeCM('PN')" data-ma="PN">PN</div>
              <div class="ub ub-pc ub-ac" @click="changeCM('GX')" data-ma="GX">GX</div>
            </div>
          </div>
          <input class="ub ub-f1 ub-ac none-input f14  pn" placeholder="请输入航班号" v-model="FlightNum">
        </div>
        <div class="ub ub-ac padding-css1 border-botttom">
          <div class="ub input-left">
            <img class="hb-img1" src="./rili.png">
            <span class="margin-l-css2">航班日期</span>
          </div>
          <div class="ub ub-f1 ub-ac ub-pe">
            <input class="datetime f12 ub " style="width:60%" v-model="date" id="dateSelect" type="text" readonly="readonly">
            <img class="hb-img2 ub ub-ac margin-l-css2" src="./arrow_down@2x.png">
          </div>
        </div>
      </div>
      <div class="padding-css4">
        <div class="btn1 bg-color-main btn-border ub ub-ac ub-pc f16" @click="airDynamicDtail" id="selectByFlightNum">
          <span>查询</span>
        </div>
      </div>
    </div>
    <div v-show="sel===1" class="index1  bg-white">
      <div class="padding-css3">
        <div class="ub padding-css1 border-botttom ub-ac ">
          <div class="qj-left ub ub-ac pn" @click="city(true)"><img class="hb-img1" src="./fangzi.png">
            <div class="startCity ub f14  sinput  tright" data-szm="">{{scity.city}}</div>
          </div>
          <div @click="changeCity()" class="qj-mid ub ub-pc jiaohuan"><img class="qj-img1 ub" src="./index_change@2x.png"></div>
          <div class="qj-right ub ub-ac ub-pe " @click="city(false)">
            <div class="endCity ub f14  sinput  tright ub-pe" data-szm="">{{ecity.city}}</div>
          </div>
        </div>
        <div class="ub padding-css1 border-botttom ub-ac">
          <div class=" input-left">
            <img class="hb-img1" src="./rili.png">
            <span class="margin-l-css2">航班日期</span>
          </div>
          <div class="ub ub-f1 ub-ac ub-pe">
            <input class="datetime1 f12 ub" style="width: 60%;" type="text" v-model="date1" id="SecFlightDate" readonly="readonly">
            <img class="hb-img2 ub ub-ac margin-l-css2" src="./arrow_down@2x.png">
          </div>

        </div>
      </div>
      <div class="padding-css4 ">
        <div class="btn1 bg-color-main btn-border ub ub-ac ub-pc f16" @click="airDynamicDtail2" id="checkByArea">
          <span>查询</span>
        </div>
      </div>
    </div>
    <div v-show="sel===2" class="index1  bg-white">
      <div class="ub ub-fh  bg-F2   todaylist">
        <div class="ub ub-ac jrdiv1 ">
          <span class="margin-l-css3">航班号</span>
        </div>
        <div class="ub ub-ac jrdiv2 ">起降地</div>
        <div class="ub ub-ac jrdiv3 ">计划/实际起降</div>
        <div class="ub ub-ac jrdiv4 ub-pc">状态</div>
      </div>
      <div :key="index" @click="opendetail(item)" v-for="(item,index) in todayData" class="ub ub-fh ub-ver border-botttom padding-css6 dongtai">
        <div class="ub ub-fh ">
          <div class="ub ub-ac jrdiv1 ">
            <span class="margin-l-css3">{{item.flightNo}}</span>
          </div>
          <div class="ub ub-ac jrdiv2 ">{{item.depCity}}</div>
          <div class="ub ub-ac jrdiv3 ">{{item.etd.substr(11,5)||'--:--'}}/{{item.atd.substr(11,5)||'--:--'}}</div>
          <div class="ub ub-ac jrdiv4 ub-pc status" :class="getClass(item.status)">{{item.status}}</div>
        </div>
        <div class="ub ub-fh mt">
          <div class="ub ub-ac jrdiv1 "></div>
          <div class="ub ub-ac jrdiv2 ">{{item.arrCity}}</div>
          <div class="ub ub-ac jrdiv3 ">{{item.eta.substr(11,5)||'--:--'}}/{{item.ata.substr(11,5)||'--:--'}}</div>
          <div class="ub ub-ac jrdiv4 "></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import { mapState } from 'vuex';
import $ from '../../../static/jquery/index.js'
export default {
  created: function () {
    let self = this;
    this.$store.commit('changeHeader', { // 提交首页header
      left: '返回',
      right: '',
      middle: '航班动态',
      ifshow: true,
      leftAction: '-1',
      leftIcon: 'leftIcon',
      rightAction: '',
      rightIcon: ''
    });
    this.sel = this.airDynamicFindjg.airDynamicSel
    this.changePage('/airNum', this.sel);
    let nowDate = new Date();
    this.date1 = this.date = (nowDate.getFullYear()) + '-' + ((nowDate.getMonth() + 1) < 10 ? '0' + (nowDate.getMonth() + 1) : (nowDate.getMonth() + 1)) + '-' + (nowDate.getDate() < 10 ? '0' + nowDate.getDate() : nowDate.getDate())
    setTimeout(function () {
      self.opt()
    }, 500);
    let content = {
    }
    let data = this.$utils.getUserContent(content);
    this.$store.commit('showLoading');
    this.$http.post(this.$RS.CityList, data).then(
      function (res) {
        // 响应成功回调
        self.$store.commit('closePop');
        console.log(res)
        res = res.body;
        if (res.code === 1000) {
          self.countryList = res.content.city_list;
          self.hot_city_list = res.content.hot_city_list;
        } else {
          self.$store.dispatch('showTx', { text: res.message || '网络错误，请重试' });
        }
      },
      function (err) {
        self.$store.commit('closePop');
        // 响应错误回调
        self.$store.dispatch('showTx', { text: '网络错误，请重试' });
      }
    );
  },
  data: function () {
    return {
      orderPage: [
        { message: '按航班号', value: '/airNum', sel: 0 },
        { message: '按起降地', value: '/airPlace', sel: 1 },
        /* { message: '已关注', value: '/airCollec', sel: 2 }, */
        { message: '今日航班', value: '/airToday', sel: 2 }
      ],
      sel: 0,
      date: '',
      date1: '',
      CM: false,
      airCM: 'PN',
      scity: { 'city': '出发城市', 'code': '' },
      ecity: { 'city': '到达城市', 'code': '' },
      iscountry: false,
      isScity: true,
      countryList: [],
      hot_city_list: [],
      FlightNum: '',
      todayData: []
    }
  },
  components: {
  },
  methods: {
    opendetail: function (item) {
      let data = item;
      data.startCityName = item.depCity;
      data.endCityName = item.arrCity;
      data.atdChn = item.atd;
      data.ataChn = item.ata;
      data.boardingGate = item.boardGate
      data.startFlightAddress = item.arrStnCn
      data.endFilghtAddress = item.depStnCn
      this.$store.commit('setAirDynamicFindjg', item)
      this.$router.push('/airDynamic_findjg');
    },
    getClass: function (name) {
      switch (name) {
        case '到达':
          return 'daoda';
          break;
        case '取消':
          return 'quxiao';
          break;
        case '起飞':
          return 'qifei';
          break;
        case '计划':
          return 'jihua';
          break;
        case '延误':
          return 'yanwu';
          break;
        default:
          return 'daoda';
          break;
      }
    },
    airDynamicDtail: function () {
      let self = this;
      let content = {
        type: 1,
        flightNum: self.FlightNum,
        airCM: self.airCM,
        time: self.date
      }
      this.$store.commit('setAirDynamic', content)
      this.$router.push('/airDynamicDetail')
    },
    airDynamicDtail2: function () {
      let self = this;
      let content = {
        type: 2,
        dep: self.scity.code,
        arr: self.ecity.code,
        time: self.date1
      }
      this.$store.commit('setAirDynamic', content)
      if (!this.loginData.isLogin) {
        this.$router.push('/login');
      } else {
        this.$router.push('/airDynamicDetail')
      }
    },
    changeCity: function () {
      if (this.scity.city === '出发城市' && this.ecity.city !== '到达城市') {
        this.scity = this.ecity;
        this.ecity = { 'city': '到达城市', 'code': '' }
      } else if (this.scity.city !== '出发城市' && this.ecity.city === '到达城市') {
        this.ecity = this.scity;
        this.scity = { 'city': '出发城市', 'code': '' }
      } else if (this.scity.city !== '出发城市' && this.ecity.city !== '到达城市') {
        let cityT = this.scity;
        this.scity = this.ecity;
        this.ecity = cityT;
      }
    },
    city: function (data) {
      this.isScity = data;
      this.iscountry = true
    },
    selCountry: function (code, name) {
      console.log(code + name)
      this.iscountry = !this.iscountry;
      this.isScity ? this.scity.city = name : this.ecity.city = name;
      this.isScity ? this.scity.code = code : this.ecity.code = code;
    },
    changeCM: function (data) {
      console.log(data)
      if (data === '') {
        this.CM = !this.CM;
      } else {
        this.airCM = data;
      }
    },
    changePage: function (value, index) {
      this.sel = index;
      this.$store.commit('setAirDynamicSel', index)
      if (index === 2) {
        this.getTodayData()
      }
    },
    getTodayData: function () {
      let self = this;
      let content = {};
      let data = this.$utils.getUserContent(content);
      this.$store.commit('showLoading');
      this.$http.post(this.$RS.findTodayDynamic, data).then(
        function (res) {
          // 响应成功回调
          self.$store.commit('closePop');
          res = res.body;
          console.log(res)
          if (res.code === 1000) {
            self.todayData = res.content.list;
          } else {
            self.$store.dispatch('showTx', { text: res.message || '网络错误，请重试' });
          }
        },
        function (err) {
          self.$store.commit('closePop');
          // 响应错误回调
          self.$store.dispatch('showTx', { text: '网络错误，请重试' });
        }
      );
    },
    opt: function (dat, tal) {
      var self = this;
      var nowDate = new Date();
      var mindat = '';
      var maxdat = '';
      var opts = {};
      opts.date = {
        preset: 'date'
      };
      opts.datetime = {
        preset: 'datetime'
      };
      opts.time = {
        preset: 'time'
      };
      mindat = new Date(new Date((nowDate.getFullYear()) + '/' + (nowDate.getMonth() + 1) + '/' + nowDate.getDate()).getTime() - 1000 * 24 * 3600 * 2);
      maxdat = new Date(new Date((nowDate.getFullYear()) + '/' + (nowDate.getMonth() + 1) + '/' + nowDate.getDate()).getTime() + 1000 * 24 * 3600 * 2);
      opts.default = {
        theme: 'android-holo light', // 皮肤样式
        display: 'bottom', // 显示方式
        mode: 'scroller', // 日期选择模式
        lang: 'zh',
        dateFormat: 'yyyy-mm-dd',
        dateOrder: 'yymmdd',
        minDate: mindat,
        maxDate: maxdat,
        rows: 3,
        onSelect: function (valueText, inst) {
          console.log(valueText);
          self.date = valueText
        }
      };
      /*       console.log($) */
      $('.datetime').mobiscroll().date(opts.default);
      opts.defaults = {
        theme: 'android-holo light', // 皮肤样式
        display: 'bottom', // 显示方式
        mode: 'scroller', // 日期选择模式
        lang: 'zh',
        dateFormat: 'yyyy-mm-dd',
        dateOrder: 'yymmdd',
        minDate: mindat,
        maxDate: maxdat,
        rows: 3,
        onSelect: function (valueText, inst) {
          console.log(valueText);
          self.date1 = valueText
        }
      };
      /*       console.log($) */
      $('.datetime1').mobiscroll().date(opts.defaults);
    }
  },
  computed: mapState(['loginData', 'airDynamic', 'airDynamicFindjg'])
}
</script>

<style lang="stylus">
@import '../../stylus/base.styl';
@import '../../../static/zyh.styl';
.orderHeader
  height: f_times(2.5);
  // margin-bottom: f_times(1);
  box-sizing: border-box;
  padding: f_times(0.5);
  border-bottom: solid 1px #e0e0e0;
.selItem
  position: relative;
  color: #843D99;
  &:after
    content: '';
    position: absolute;
    left: 0;
    bottom: f_times(-0.58);
    width: 100%;
    height: 2px;
    background-color: $bgCol;
.padding-css3
  padding: f_times(0.8) f_times(0.8);
.border-botttom
  border-bottom: 1px solid #EEE;
.padding-css1
  padding: f_times(0.7) 0;
.pn
  height: f_times(2.4);
  line-height: f_times(2.4);
.input-left
  width: f_times(8);
#sel_ma
  width: f_times(2.4);
  margin-right: f_times(0.8);
.hb-img1
  height: f_times(0.96);
  margin-right: f_times(0.4);
.margin-l-css2
  margin-left: f_times(0.4);
.padding-css4
  padding: f_times(0.8) f_times(0.8);
.bg-color-main
  background-color: #843D99;
.btn1
  height: f_times(3);
  color: white;
  width: 100%;
.btn-border
  border-radius: f_times(0.24);
.bg-color-main
  background-color: #843D99;
.hb-img2
  width: f_times(1.2);
.arrow_down
  background-image: url('./arrow_down@2x.png');
  width: f_times(0.8);
  height: f_times(0.8);
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: f_times(-0.4);
#xila_ma
  position: absolute;
  width: 100%;
  bottom: f_times(-2);
  left: 0;
  background-color: #fff;
  border: 1px solid #d8d8d8;
  z-index: 100;
#xila_ma>div:first-child
  border-bottom: 1px solid #d8d8d8;
  padding: 3px;
.qj-mid
  width: 20%;
.qj-left
  width: 40%;
.qj-right
  width: 40%;
.qj-img1
  height: f_times(2);
.qj-img2
  width: f_times(0.8);
  height: f_times(1);
  margin-right: f_times(1.2);
input
  padding: 0 !important;
.bg-F2
  background-color: #F2F2F2;
.jrdiv1
  width: 22%;
.jrdiv2
  width: 22%;
.jrdiv3
  width: 34%;
.jrdiv4
  width: 22%;
.todaylist div
  height: f_times(2.5);
.margin-l-css3
  margin-left: f_times(0.7);
.border-botttom
  border-bottom: 1px solid #EEE;
.padding-css6
  padding: f_times(0.7) 0;
.dongtai
  font-size: f_times(0.85);
.mt
  margin-top: f_times(0.5);
.daoda
  color: #843D99;
.jihua
  color: #009EFF;
.c-lor1
  color: #6BAB76;
.yanwu
  color: #FFB134;
.quxiao
  color: red;
.qifei
  color: #6BAB76;
</style>